<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      {{helloMsg}}
    </div>
    <div>
      {{msg}}
    </div>
    <div>
      {{computDMessage}}
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from 'vue-class-component'

export default class About extends Vue {
  // initial data
  msg = 123
  // use prop values for initial data
  helloMsg = 'Hello, '

  computDMessage = '1'

  // lifecycle hook
  mounted ():void {
    console.log(1, this)
    this.greet()
  }

  // computed
  get computedMsg ():string {
    console.log(2)
    return 'computed ' + this.msg
  }

  // method
  greet ():void {
    console.log(3)
  }
}

</script>
<style scoped lang="scss">
.about{
  height: 100%;
  width: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: white;
  border-radius: 4px;
  padding: 5px;
}
</style>
